<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="赛事详情11" />
      <scroll-view scroll-y class="scroll-view-content">
        <!-- 顶部Banner -->
        <image class="banner" :src="imgUrl + 'a.jpg'" mode="aspectFill" />
        <view class="club-info-card">
          <!-- 顶部信息 -->
          <view class="top">
            <image class="logo" :src="club.logo" mode="aspectFill" />
            <view class="info">
              <view class="row">
                <view class="name">{{ club.name }}</view>
                <view class="score-label">积分：</view>
                <view class="score">{{ club.score }}</view>
              </view>
              <view class="row leader">
                <text>领队：</text>
                <text>{{ club.leader }}</text>
                <image class="icon" :src="imgUrl + 'leader-icon.png'" v-if="club.leaderIcon" />
              </view>
              <view class="desc">{{ club.desc }}</view>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="actions">
            <view class="action">
              <image class="action-icon" :src="imgUrl + 'lightning.png'" />
              <text>已助力</text>
            </view>
            <view class="action">
              <image class="action-icon" :src="imgUrl + 'home2@2x.png'" />
              <text>主页</text>
            </view>
            <view class="action">
              <image class="action-icon" :src="imgUrl + 'share3@2x.png'" />
              <text>分享</text>
            </view>
          </view>
          <!-- Tabs -->
          <view class="tabs">
            <view v-for="(tab, idx) in tabs" :key="tab" :class="['tab', { active: idx === activeTab }]"
              @tap="onTabClick(idx)">
              {{ tab }}
              <view v-if="idx === activeTab" class="tab-underline"></view>
              <!-- 最后一个tab右侧加图标 -->
              <image v-if="idx === tabs.length - 1" class="tab-icon" :src="imgUrl + 'question2@2x.png'"
                mode="aspectFit" />
            </view>
          </view>

          <view v-if="activeTab === 0" class="schedule-container">
            <ScheduleTab :groupedSchedule="groupedSchedule" :projects="projects" :groups="groups"
              :selectedProject="selectedProject" :selectedGroup="selectedGroup" @projectChange="onProjectChange"
              @groupChange="onGroupChange" />
          </view>
          <view v-if="activeTab === 1" class="schedule-container">
            <ClubMemberList :memberList="memberList" />
          </view>
          <view v-if="activeTab === 2" class="schedule-container">
            <MedalRanking :medalData="medalData" />
          </view>
          <view v-if="activeTab === 3" class="schedule-container">
            <ScoreDetailList :scoreDetailList="scoreDetailList" />
          </view>
        </view>

      </scroll-view>

    </view>

  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import MedalRanking from '@/components/ClubEvent/MedalRanking/MedalRanking.vue'
  import ClubMemberList from '@/components/ClubEvent/ClubMemberList/ClubMemberList.vue'
  // import ScheduleList from '@/components/ClubEvent/ScheduleList/ScheduleList.vue'
  import ScheduleTab from '@/components/ClubEvent/ScheduleTab/ScheduleTab.vue'
  import ScoreDetailList from '@/components/ClubEvent/ScoreDetailList/ScoreDetailList.vue'
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const club = {
    logo: imgUrl + 'WechatIMG136@2x.png',
    name: '草源体育俱乐部',
    score: 29482,
    leader: '方励谦',
    leaderIcon: '', // 可选，领队后的小icon
    desc: '草源体育俱乐部坐落于风景秀丽、交通便利的，拥有面积达XX平方米的现代化运动场地qwqqw qw'
  }

  const tabs = ['赛程', '俱乐部成员', '奖牌榜', '积分详情']
  const activeTab = ref(0)

  function onTabClick(idx) {
    activeTab.value = idx
    console.log('activeTab', idx);

    // 这里可以切换内容
  }

  const projects = ['100m', '200m']
  const groups = ['第10组', '第11组']
  const selectedProject = ref('')
  const selectedGroup = ref('')

  const schedule = ref([
    {
      id: 1,
      date: '2024.12.12',
      dateShort: '12.21',
      time: '09:12',
      group: '第10组',
      event: '100m',
      player: '刘金瀚',
      type: '预赛',
      eventName: '公开男子'
    },
    {
      id: 2,
      date: '2024.12.12',
      dateShort: '12.21',
      time: '09:12',
      group: '第10组',
      event: '100m',
      player: '刘金瀚',
      type: '决赛',
      eventName: '公开男子'
    }
    // ...更多数据
  ])
  const memberList = [
    {
      avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
      name: '李思雨',
      projects: ['U7混合 60m', 'U7混合 100m', 'U7混合 400m'],
      value: 325
    },
    {
      avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
      name: '李思雨',
      projects: ['U7混合 60m', 'U7混合 100m', 'U7混合 400m'],
      value: 325
    },
    {
      avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
      name: '李思雨',
      projects: ['U7混合 60m', 'U7混合 100m', 'U7混合 400m'],
      value: 325
    }
  ]
  const medalData = {
    medals: {
      gold: 49,
      silver: 30,
      bronze: 22,
      total: 112
    },
    list: [
      {
        avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
        name: '李思雨',
        group: 'U13男子组',
        event: '60m',
        rank: '冠军',
        medalIcon: imgUrl + 'goldMedal.png'
      },
      {
        avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
        name: '李思雨',
        group: 'U13男子组',
        event: '60m',
        rank: '冠军',
        medalIcon: imgUrl + 'goldMedal.png'
      },
      {
        avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
        name: '李思雨',
        group: 'U13男子组',
        event: '60m',
        rank: '冠军',
        medalIcon: imgUrl + 'goldMedal.png'
      }
    ]
  }
  const scoreDetailList = [
    { name: '李思雨', reason: '冠军', score: 100 },
    { name: '李思雨', reason: '冠军', score: 100 },
    { name: '李思雨', reason: '报名项目', score: 100 },
    { name: '李思雨', reason: '加入俱乐部', score: 100 },
    { name: '李思雨', reason: '冠军', score: 100 },
    { name: '李思雨', reason: '冠军', score: 100 }
  ]
  const groupedSchedule = computed(() => {
    const result = {}
    schedule.value.forEach(item => {
      if (
        (selectedProject.value && item.event !== selectedProject.value) ||
        (selectedGroup.value && item.group !== selectedGroup.value)
      ) {
        return
      }
      if (!result[item.date]) result[item.date] = []
      result[item.date].push(item)
    })
    return result
  })

  function onProjectChange(value) {
    selectedProject.value = value
  }
  function onGroupChange(value) {
    selectedGroup.value = value
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style>

</style>